<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>维修工单项</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <style>
        #layer-images img {
            width: 160px;
            height: 160px;
            margin: 5px;
        }
    </style>
</head>
<body>

<div class="layui-fluid" id="container">
    <div class="layui-card">
        <div class="layui-card-header">基本信息</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="repair-item-form">
                <input type="hidden" name="id">
                <div class="layui-row">
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">维修内容</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" v-model="form.name" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">设施设备</label>
                            <div class="layui-input-block">
                                <input type="text" name="deviceName" v-model="form.deviceName" class="layui-input"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">位置信息</label>
                            <div class="layui-input-block">
                                <input type="text" name="deviceLocation" v-model="form.deviceLocation"
                                       class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">执行人</label>
                            <div class="layui-input-block">
                                <input type="text" name="executeByName" v-model="form.executeByName" class="layui-input"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">通知人</label>
                            <div class="layui-input-block">
                                <input type="text" name="notifyNames" v-model="form.notifyNames" class="layui-input"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>1" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">随行车辆</label>
                            <div class="layui-input-block">
                                <input type="text" name="vehicle" v-model="form.vehicle" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>1" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">随行司机</label>
                            <div class="layui-input-block">
                                <input type="text" name="driver" v-model="form.driver" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>1" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">维修工具</label>
                            <div class="layui-input-block">
                                <input type="text" name="tools" v-model="form.tools" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>1" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">维修材料</label>
                            <div class="layui-input-block">
                                <input type="text" name="materials" v-model="form.materials" class="layui-input"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>1" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">开始时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="startTime" v-model="form.startTime" class="layui-input"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>2" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">结束时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="endTime" v-model="form.endTime" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="text" name="stateText" v-model="form.stateText" class="layui-input"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>3" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">审核结果</label>
                            <div class="layui-input-block">
                                <input type="text" name="auditResultText" v-model="form.auditResultText"
                                       class="layui-input"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>2" class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">完成情况</label>
                            <div class="layui-input-block">
                                <textarea readonly class="layui-textarea" name="completion"
                                          v-model="form.completion"></textarea>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>2" class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">审核意见</label>
                            <div class="layui-input-block">
                                <textarea class="layui-textarea" id="audit-comment" name="auditComment"
                                          v-model="form.auditComment"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">现场照片（共<span id="imgs-count"></span>张）</div>
        <div class="layui-card-body">
            <div id="layer-images"></div>
        </div>
    </div>
    <div v-if="form.state==3" style="text-align: center;">
        <button id="audit-btn1" class="layui-btn" @click="audit(1)">通过</button>
        <button id="audit-btn2" class="layui-btn" @click="audit(2)">不通过</button>
        <button id="cancel-btn" class="layui-btn layui-btn-danger" @click="cancel()">撤销</button>
    </div>
</div>
<script src="/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/common.js"></script>
<script src="/js/vue.min.js"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'laytpl', 'util'], function () {
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var id = getParam('id');
        layui.util.fixbar();

        new Vue({
            el: "#container",
            data() {
                return {
                    form: {
                        state: 0
                    }
                }
            },
            mounted() {
                if (id) {
                    this.loadForm(id);
                }
            },
            updated() {
                form.render();
            },
            methods: {
                loadForm(id) {
                    let that = this;
                    $.get('/repair-items/' + id, function (result) {
                        //工单信息
                        var data = result.data;
                        that.form = data;
                        form.val('repair-item-form', data);
                        //加载上传图片
                        if (data.imgs) {
                            var images = data.imgs.split(',');
                            $("#layer-images").empty();
                            for (var i in images) {
                                var img = images[i];
                                var item = '<img layer-src="/img/' + img + '" src="/img/' + img + '">';
                                $('#layer-images').append(item);
                            }
                            $('#imgs-count').text(images.length);
                            layer.photos({
                                photos: '#layer-images',
                                anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
                            });
                        }
                    });
                },
                audit(auditResult) {
                    let that = this;
                    let auditComment = this.form.auditComment;
                    if (auditResult == 2 && !auditComment) {
                        layer.msg('输入审核意见');
                        return;
                    }
                    $.post('/repair-items/audit', {
                        id: id,
                        auditResult: auditResult,
                        auditComment: auditComment || ''
                    }, function () {
                        that.form.state = 4;
                    });
                },
                cancel() {
                    let that = this;
                    layer.confirm('确定撤销该维修项吗？', function (index) {
                        $.post('/repair-items/cancel', {
                            id: id
                        }, function (res) {
                            that.form.state = -1;
                        });
                        layer.close(index);
                    });
                }
            }
        })
    });
</script>
</body>
</html>